<template>
	<view class="page-content">
		<u-navbar title="账号安全" :autoBack="true" :bgColor="them_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<scroll-view scroll-y="true" v-bind:style="{'height':scroll_Height}" >
				<form @submit="formSubmit" @reset="formReset">
					<view class="content">
						<!-- 验证方式 -->
						<view v-if="false" class="item">
							<view class="left">
								验证方式：
							</view>
							<view class="right2">
								<radio-group>
									<label>
										<radio /><text>手机验证</text>
									</label>
									<label>
										<radio /><text>邮箱验证</text>
									</label>
								</radio-group>
							</view>
						</view>
						<!-- 新密码 -->
						<view class="item">
							<view class="left">
								新密码：
							</view>
							<view class="right">
								<input class="right-input" type="text" placeholder="输入新密码" name="password" />
							</view>
						</view>
			
			
						<view class="item">
							<view class="left">
								原绑定邮箱：
							</view>
							<view class="right">
								<input class="right-input  right-input2 " type="text" disabled="true" :value="email" />
							</view>
						</view>
			
						<!-- 新邮箱 -->
						<view class="item">
							<view class="left">
								新邮箱：
							</view>
							<view class="right">
								<input class="right-input" type="text" placeholder="输入新邮箱" name="email" />
							</view>
						</view>
			
						<!-- 新绑定手机号 -->
						<view class="item">
							<view class="left">
								新绑定手机号：
							</view>
							<view class="right">
								<input class="right-input" type="number" placeholder="输入新绑定手机号" name="new_phone" />
							</view>
						</view>
			
						<!-- 已验证手机 -->
						<view class="item">
							<view class="left">
								原绑定手机号：
								<!-- <text>{{mobile}}</text> -->
							</view>
							<view class="left3">
								<input type="number" class="left-input" :value="mobile" @input="mobileInput" />
							</view>
							<view class="right">
								<text v-if="!again_sent" class="txt2" @click="getCode()">发送验证码</text>
								<text v-if="again_sent" class="txt2"> {{time}} s </text>
			
							</view>
						</view>
						<!-- 验证码 -->
						<view class="item">
							<view class="left2">
								<input type="text" class="input" placeholder="输入验证码" name="code" />
							</view>
						</view>
					</view>
					<view class="item2">
						<button class="btn btn1" form-type="reset">重置</button>
						<button class="btn" form-type="submit">提交</button>
					</view>
				</form>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		update_info,
		userInfo
	} from '@/api/user';
	import {
		get_code
	} from '@/api/public';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				scroll_Height: '',
				them_color: getApp().globalData.theme_color,
				mobile: '', //原来的电话号码
				email: '',
				again_sent: false,
				time: 180,
				navH: '',
			}
		},
		computed: mapGetters(['isLogin', 'app_token']),
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;
			this.scroll_Height = parseFloat(getApp().globalData.screenHidth) * 0.99 * 2 + 'upx';
			userInfo({
				app_token: this.app_token
			}).then(res => {
				this.mobile = res.data.mobile_phone;
				this.email = res.data.email;
			})
		},
		methods: {
			// 原来绑定的手机号
			mobileInput: function(e) {
				this.mobile = e.detail.value;
			},

			// 提交
			formSubmit: function(e) {
				var that = this;
				update_info({
					app_token: that.app_token,
					password: e.detail.value.password,
					code: e.detail.value.code,
					email: e.detail.value.email,
					new_phone: e.detail.value.new_phone,
					mobile: this.mobile //原手机号
				}).then((res2) => {
					console.log(res2)
					var data_string = res2;
					uni.showModal({
						content: data_string.msg,
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: 'pages/users/user_info/index'
							})
						}
					})
				})

			},

			// 重置
			formReset: function() {

			},
			// 获取验证码
			getCode: function() {
				var _this = this;
				_this.time = 180;
				get_code({
					mobile: _this.mobile,
					type: 2
				}).then((res2) => {
					console.log(res2)
					var data_string = res2;
					_this.again_sent = true;
					var intervalID = setInterval(function() {
						if (_this.time > 0) {
							_this.time = _this.time - 1;
						} else {
							_this.again_sent = false;
						}
					}, 1000)

					if (_this.time == 0) {
						clearInterval(intervalID);
						_this.again_sent = false;
					}

				}).catch(err => {
					console.log(err)
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 20rpx;

		.content {
			padding: 20rpx;
			.item {
				display: flex;
				justify-content: space-between;
				color: #474747;
				border-bottom: 1rpx solid #EEEEEE;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.left {
					line-height: 80rpx;
					font-size: 30rpx;
					.top {
						font-size: 30rpx;
						line-height: 50rpx;
					}
					.txt {
						font-size: 24rpx;
						line-height: 35rpx;
						color: #A7A7A7;
					}
					.txt2 {
						color: #CC0518;
					}
				}

				.left2 {
					width: 100%;
					height: 80rpx;
					.input {
						width: 100%;
						height: 80rpx;
					}
				}

				.left3 {
					width: 30%;
					.left-input {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
					}
				}

				.right {
					line-height: 90rpx;

					.right-input {
						width: 100%;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 30rpx;
						text-align: right;
					}

					.right-input2 {
						color: #ABABAB;
					}

					.txt2 {
						line-height: 90rpx;
						padding: 8rpx 25rpx;
						border: 1rpx solid #474747;
						color: #474747;
						border-radius: 8rpx;
					}


				}

				.right2 {
					line-height: 80rpx;
					width: 75%;
				}
			}


		}

		.item2 {
			width: 100%;
			height: 80rpx;
			text-align: center;
			margin-top: 40rpx;
			display: flex;

			.btn {
				width: 40%;
				height: 80rpx;
				line-height: 80rpx;
				margin: auto;
				background-color: rgba(233, 51, 35, 1);
				color: #FFFFFF;
				text-align: center;
				border-radius: 22px;
				font-size: 30rpx;
			}

			.btn1 {
				background-color: #ABABAB;
			}
		}


	}
</style>
